<!doctype html>
<html lang="en">

<!-- Head -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="爱生活的懒喵！">
    <meta name="keyword" content="">
    <link rel="shortcut icon" href="./image/favicon.jpg">

    

    <title>
        
        hexo博客(二)：图片引用问题 |
        
        LanMiao
    </title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Custom Fonts -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Plugin CSS -->


    <!-- Custom CSS -->
    <!-- ↓这是stylus文件 -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/home.css">
    <link rel="stylesheet" href="/css/highlight.css">
    <link rel="stylesheet" href="/css/toc.css">


</head>
<body></body>


<body>

<!-- Header -->
<!-- Post Header -->
<style type="text/css">
    header.intro-header {
     background-image: url('header-img.jpg');
        /*post*/
    
    }
</style>

<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <!-- 文章 -->
                
                <div class="post-heading">
                    <div class="tags">
                        
                        <a class="tag" href="/tags/#hexo"
                           title="hexo">hexo</a>
                        
                        <a class="tag" href="/tags/#git"
                           title="git">git</a>
                        
                        <a class="tag" href="/tags/#博客"
                           title="博客">博客</a>
                        
                    </div>
                    <h1>hexo博客(二)：图片引用问题</h1>
                    <h2 class="subheading">路径问题</h2>
                    <span class="meta">
                            Posted by LanMiao on
                        2017-01-12
                        </span>
                </div>
                <!-- 非文章 -->
                

            </div>
        </div>
    </div>
</header>

<!-- Nav -->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">LanMiao</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <!-- Known Issue, found by Hux:
            <nav>'s height woule be hold on by its content.
            so, when navbar scale out, the <nav> will cover tags.
            also mask any touch event of tags, unfortunately.
        -->
        <div id="huxblog_navbar">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    
                    <li><a href="/">Home</a></li>
                    
                    <li><a href="/portfolio">Portfolio</a></li>
                    
                    <li><a href="/about">About</a></li>
                    
                </ul>
            </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Content -->
<!-- Content -->
<div class="container">
    <div class="row">
        <!-- Post container -->

        <div class="
                col-lg-8 col-lg-offset-1
                col-md-8 col-md-offset-1
                col-sm-12
                col-xs-12
                post-container
            ">

            <p>日了狗了，反正我怎么写都不对。没法子了，开了<a href="https://hexo.io/zh-cn/docs/asset-folders.html" target="_blank" rel="external">文章资源文件夹</a>功能。当然你也可以不用本地的图片，比如放到七牛、百度网盘或者其他地方。</p>
<a id="more"></a>
<h1 id="资源文件夹"><a href="#资源文件夹" class="headerlink" title="资源文件夹"></a>资源文件夹</h1><p>资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 <code>![](/images/image.jpg)</code> 的方法访问它们。</p>
<h2 id="文章资源文件夹"><a href="#文章资源文件夹" class="headerlink" title="文章资源文件夹"></a>文章资源文件夹</h2><p>对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">post_asset_folder: true</div><div class="line">`</div></pre></td></tr></table></figure></p>
<p>当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。</title></p>
<h2 id="相对路径引用的标签插件"><a href="#相对路径引用的标签插件" class="headerlink" title="相对路径引用的标签插件"></a>相对路径引用的标签插件</h2><p>通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代，社区创建了很多插件来解决这个问题。但是，随着Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&#123;% asset_path slug %&#125;</div><div class="line">&#123;% asset_img slug [title] %&#125;</div><div class="line">&#123;% asset_link slug [title] %&#125;</div></pre></td></tr></table></figure>
<p>比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法 <code>![](/example.jpg)</code> ，它将 不会 出现在首页上。（但是它会在文章中按你期待的方式工作）</p>
<p>正确的引用图片方式是使用下列的标签插件而不是 markdown ：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123;% asset_img example.jpg This is an example image %&#125;</div></pre></td></tr></table></figure></p>
<p>通过这种方式，图片将会同时出现在文章和主页以及归档页中。</p>



            <!-- Pager -->
            <ul class="pager">
                
                <li class="previous">
                    <a href="/2017/01/15/hexo3/" >&larr; Previous Post</a>
                </li>
                
                
                <li class="next">
                    <a href="/2017/01/01/hexo1/" >Next Post &rarr;</a>
                </li>
                
            </ul>



        </div>
        <!-- Sidebar container-->
        <div class="
    col-lg-3 col-lg-offset-0
    col-md-3 col-md-offset-0
    col-sm-12
    col-xs-12
    sidebar-container
">
            <!-- toc -->
            <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top" role="complementary">
                <h4><i class="fa fa-bookmark"></i> Catalog</h4>
                <ul class="nav bs-docs-sidenav">

                </ul>

            </div>

        </div>
    </div>
</div>

<!-- Footer -->
<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                

                </ul>
                <p class="copyright text-muted">
                    Copyright &copy; LanMiao 2017
                    <br>
                    Theme by <a href="http://beantech.org/">Bean Tech</a>
                    <span style="display: inline-block; margin: 0 5px;">
                        <i class="fa fa-heart"></i>
                    </span> 
                    re-Ported by <a href="http://lanmiao.oschina.io">LanMiao</a>
                </p>
            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="/js/script.js"></script>




</body>
</html>